<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="24">
        <el-form :inline="true" :model="queryParams" ref="queryForm" size="small" label-width="0"
          class="demo-form-inline" style="height: 40px;float: right;">
          <el-form-item prop="costNo">
            <el-input v-model="queryParams.costNo" placeholder="费用单号" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>

          <el-form-item style="width: 100px;" prop="status">
            <el-select v-model="queryParams.status" placeholder="费用状态" clearable size="small">
              <el-option v-for="dict in  dict.charge_status" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker v-model="beginTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
              start-placeholder="计费日期开始" end-placeholder="计费日期结束">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="success" size="mini" :icon="queryParams.params.searchQuery?'el-icon-loading':''"
              @click="$refs.queryRef.show()">高级查询
            </el-button>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleComputePayfee" v-hasPermi="['payfee:tollCenter:computePayfee']">计算费用</el-button>
        <el-button type="primary" :disabled="multiple" plain icon="el-icon-edit-outline" size="mini" @click="handelChangeFee()" v-hasPermi="['payfee:ruleCost:changeFee']">改费 </el-button>
        <el-button type="primary" :disabled="multiple" plain icon="el-icon-edit" size="mini" @click="handelDemolitionFee()" v-hasPermi="['payfee:ruleCost:demolitionFee']">拆费</el-button>
        <el-button type="danger" :disabled="multiple" plain icon="el-icon-delete" size="mini" @click="handleDelete" v-hasPermi="['payfee:ruleCost:remove']">删除</el-button>
        <el-button type="primary" plain icon="el-icon-tickets" size="mini" @click="handelFeeLog" v-hasPermi="['payfee:computePayFeeLog:list']">计费日志</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="ruleCostList" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="单据号" align="left" prop="costNo" width="120" />
      <el-table-column label="房屋名称" align="left" width="120" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.roomName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户" align="left" prop="ownerName" width="100" />
      <el-table-column label="收费类型" align="left" prop="projectId" width="120" :formatter="projectFormat" />
      <el-table-column label="收费项目" align="left" prop="chargeId" width="120" :formatter="itemFormat" />
      <el-table-column label="收费标准" align="left" prop="normNames" width="120" />
      <el-table-column label="费用期间" align="center" prop="fiscalPeriod" width="120" />
      <el-table-column label="计费开始日期" align="center" prop="beginTime" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.beginTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计费结束日期" align="center" prop="finishTime" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.finishTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="单价" align="center" prop="prices" width="60" />
      <el-table-column label="金额" align="center" prop="moneys"  width="80"/>
      <el-table-column label="应收金额" align="center" prop="receivableMoney" width="80" />
      <el-table-column label="已收金额" align="center" prop="haveMoney" width="80" />
      <el-table-column label="优惠金额" align="center" prop="specialMoney" width="80" />
      <!--<el-table-column label="优惠后金额" align="center" prop="queenMoney"  width="120"/>-->
      <el-table-column label="冲抵金额" align="center" prop="amountAmount" width="80" />
      <el-table-column label="收全日期" align="center" prop="fullReceiptDate" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.fullReceiptDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status" width="80">
        <template slot-scope="scope">
          <span>{{ dict.label.charge_status[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" width="100"  show-overflow-tooltip/>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <l-super-query ref="queryRef" keyName="PayDemand" :columns="queryColumns" @searchQuery="searchQuery"
      @resetting="queryParams.params.searchQuery=null" />

    <compute-payfee ref="payfeeRefs" @ok="getList" />

    <demolition-fee ref="demolitionFeeData"  @ok="getList"/>

    <payfee-log ref="payfeeLogRefs" />

    <change-fee ref="changeFeeData" @ok="getList"></change-fee>

  </div>
</template>

<script>
  import {
    listRuleCost,
    getRuleCost,
    delRuleCost,
    createRuleCost
  } from "@/api/payfee/ruleCost";
  import { listMixin } from "@/utils/mixins/listMixin";
  import { payFeeDictMixin } from "@/utils/mixins/payFeeDictMixin";
  import ComputePayfee from "./computePayfee";
  import ChangeFee from "./changeFee.vue"
  import DemolitionFee from "./demolitionFee"
  import PayfeeLog from "./computePayFeeLog"

  export default {
    name: "feeManage",
    mixins: [listMixin , payFeeDictMixin],
    dicts: ['charge_status'],
    components: {
      ComputePayfee,
      ChangeFee,
      DemolitionFee,
      PayfeeLog
    },
    data() {
      return {
        sideshow: true,
        ruleCostList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          costNo: null,
          status: null,
          batcheNo: null,
          params: {}
        },
        beginTime: [],
        queryColumns: [{
            title: '费用单号',
            key: 'cost_no',
            typeCode: '',
            type: 'input',
            value: ''
          },
          {
            title: '客户名称',
            key: 'owner_name',
            type: 'input',
            value: '',
            alias: 'tor'
          },
          {
            title: '计费开始时间',
            key: 'begin_time',
            type: 'date',
            value: ''
          },
          {
            title: '计费结束时间',
            key: 'finish_time',
            type: 'date',
            value: ''
          },
        ],
        //选中的数据
        selection:[]

      }
    },
    watch: {
      currentNode(v) {
        this.getList()
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        if(this.currentNode.id){
          this.loading = true;
          this.queryParams.nodeId = this.currentNode.id
          let queryParams = this.addDateRange(this.queryParams, this.beginTime, "beginTime")
          listRuleCost(queryParams).then(res => {
            this.ruleCostList = res.rows
            this.total = res.total
            this.loading = false;
          });
        }
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.costId)
        this.selection = selection
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      searchQuery(queryParams) {
        this.queryParams.params['searchQuery'] = queryParams
        this.getList(true)
      },
      handleComputePayfee() {
        this.$refs.payfeeRefs.show({
          "currentNode": this.currentNode
        })
      },
      //改费
      handelChangeFee(){
        if(this.selection.length < 1){
          this.msgWarning("请选择需要改费的费用单")
          return
        }
        let msg = []
        this.selection.forEach(row=>{
          if(row.status != '10001'){
            msg.push(`${row.costNo}`)
          }
        })
        if(msg.length > 0){
          this.msgWarning(`费用单${msg.join(";")}不是未收全状态`)
          return
        }
        this.$refs.changeFeeData.show({ruleCostList: JSON.stringify(this.selection)})
      },
      //拆费
      handelDemolitionFee(){
        if(this.selection.length < 1){
          this.msgWarning("请选择需要拆的费用单")
          return
        }
        let msg = []
        this.selection.forEach(row=>{
          if(row.status != '10001'){
            msg.push(`${row.costNo}`)
          }
        })
        if(msg.length > 0){
          this.msgWarning(`费用单${msg.join(";")}不是未收全状态`)
          return
        }
        this.$refs.demolitionFeeData.show({ruleCostList: JSON.stringify(this.selection)})
      },
      handleDelete(){
        let costNos = this.selection.map(item => item.costNo)
        const ids = this.ids;
        this.$confirm('是否确认删除单据号为"' + costNos + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delRuleCost(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {
        });
      },
      //计费日志
      handelFeeLog(){
        this.$refs.payfeeLogRefs.show({
          "currentNode": this.currentNode
        })
      }
    },
    props: {
      currentNode: {
        type: Object,
        default: () => {}
      },
    }
  }
</script>

<style scoped>

</style>
